<comment th:remove="all">
<!-- This component represents a tabbed entity form with collections -->
<!-- Additional parameters that can be specified include: -->
<!--    additionalClasses - any additional CSS classes to apply to the form -->
<!--    additionalTabClasses - any additional CSS classes to apply to the tabs -->
<!--    showSingleTab - boolean value determining whether or not to show tabs if there is only one -->
<!--    hideTranslations - boolean value determining whether or not to hide the translation icon -->
<!--    hideActions - boolean value determining whether or not to hide the entity form actions -->
</comment>

<blc:form th:object="${entityForm}"
      method="POST"
      class="twelve columns custom entity-form"
      th:classappend="${(additionalClasses == null ? '' : additionalClasses + ' ') 
        + (additionalControllerClasses == null ? '' : additionalControllerClasses)}"
      th:action="@{${currentUrl}}"
      th:with="renderTabs=${#lists.size(entityForm.tabs) > 1 or (showSingleTab != null and showSingleTab)}">
      
    <span style="display: none;" id="previewurl" 
        th:attr="data-href=@{/sandbox/preview(ceilingEntity=*{ceilingEntityClassname}, id=*{id}, directPreview=true)}" />

    <input type="hidden" th:field="*{ceilingEntityClassname}" />
    <input type="hidden" th:field="*{entityType}" />
    <input type="hidden" th:field="*{id}" />
    <input type="hidden" th:field="*{sectionCrumbs}"  />
    <input type="hidden" th:field="*{mainEntityName}" />

    <div th:unless="${hideTopLevelErrors}" class="errors" blc_admin:errors="*{*}" th:if="${#fields.hasErrors('*')}">
        <div class="tabError" th:each="tab : ${tabErrors.entrySet()}" th:inline="text">
            <b>[[${tab.key}]]</b>
            <span th:if="${#lists.size(field.value) &gt; 1}" class="fieldError error" th:each="field : ${tab.value.entrySet()}">
                <span th:remove="tag" th:text="#{${field.key}}"></span>: <span th:each="message : ${field.value}">[[#{__${message}__}]]</span>
            </span>
            <span th:if="${#lists.size(field.value) == 1}" class="fieldError error" th:each="field : ${tab.value.entrySet()}">
                <span th:remove="tag" th:text="#{${field.key}}"></span>: <span th:remove="tag" th:text="#{${field.value.get(0)}}"></span>
            </span>
            <br />
        </div>
    </div>

    <div class="tabs-container" th:if="${renderTabs}">
        <dl class="tabs" th:classappend="${additionalTabClasses}">
            <dd th:each="tab : ${entityForm.tabs}"
                th:class="${#ef.isTabActive(entityForm, tab)}? 'active'"
                th:if="${tab.isVisible}">
                <a th:href="'#tab' + ${tabStat.count}" 
                   th:classappend="${tab.tabClass}"
                   th:text="#{${tab.title}}" /> 
            </dd>
        </dl> 
    </div>
    
    <ul class="tabs-content" th:style="${verticalTabs}? 'margin-left: 250px;'">
        <li th:each="tab : ${entityForm.tabs}"
            th:class="'tab' + ${tabStat.count} + 'Tab entityFormTab' + ${tab.tabClass}" 
            th:classappend="${(tabStat.first and tab.isVisible) or ((tabStat.index > 1 and not entityForm.tabs[tabStat.index-1].isVisible) and tab.isVisible)}? 'active'"
            th:inline="text">
            
            <fieldset th:each="group : ${tab.fieldGroups}" th:classappend="${!group.isVisible}? 'hidden'">
                <legend th:text="${group.title}" />

                <comment th:remove="all">
                <!-- *** IMPORTANT *** -->
                <!-- When changing this block of code, make sure standaloneField.html is also updated -->
                <!-- *** IMPORTANT *** -->
                </comment>
                <div th:each="field : ${group.fields}" 
                     th:if="${field.name}" 
                     th:class="${'field-box' + (field.isDirty ? ' dirty' : '') + (field.disabled ? ' disabled' : '')}" 
                     blc_admin:component_id="${field}"
                     th:classappend="${!field.isVisible}? 'hidden'">

                    <div th:if="${field.readOnly}" th:remove="tag">
                        <div th:substituteby="fields/readonly" />
                    </div>
                    <div th:unless="${field.readOnly}" th:remove="tag">
                        <div th:substituteby="${'fields/' + #strings.toLowerCase(field.fieldType)}" />
                    </div>

                    <span th:if="${field.help}" class="field-help" th:utext="#{${field.help}}" />

                </div>
            </fieldset>
            
            <div th:remove="tag" th:if="${dynamicFormTemplateOverride == null}">
                <div th:if="${tabStat.first}" th:each="dynamicForm : *{dynamicForms}">
                    <div th:include="components/dynamicForm" th:with="dynamicPropertyName=${dynamicForm.key}" />
                </div>
            </div>

            <div th:remove="tag" th:unless="${dynamicFormTemplateOverride == null}">
                <div th:include="${dynamicFormTemplateOverride}" />
            </div>

            <div th:each="collectionListGrid : ${tab.listGrids}" class="listgrid-container" th:id="${collectionListGrid.subCollectionFieldName}">
                <label th:text="#{${collectionListGrid.friendlyName}}" />
                <div th:include="components/listGridToolbar" th:with="listGrid=${collectionListGrid}" th:remove="tag" />
                <div th:include="components/listGrid" th:with="listGrid=${collectionListGrid}" th:remove="tag" />
            </div>

        </li>
    </ul>
    
    <div class="entity-form-actions">
        <button th:each="action : ${entityForm.actions}" 
            class="button radius dark" 
            th:type="${action.buttonType}"
            th:attr="data-url=@{${(#strings.isEmpty(action.urlOverride)) ? ('/' + sectionKey + action.urlPostfix) : action.urlOverride}},
                     data-action=${action.urlPostfix}"
            th:classappend="${action.buttonClass}" th:unless="${hideActions}">
            <i th:class="${action.iconClass}"></i>&nbsp;<span th:text="#{${action.displayText}}" th:remove="tag" />
        </button>
        <img th:src="@{/img/admin/ajax-loader.gif}" class="ajax-loader" />
    </div>
    
</blc:form>
